<template>
  <div>
    <div class="m-d-charts" id="hotSource" v-loading="loading" v-show="hasData"></div>
    <div class="m-d-charts" style="position: relative" v-show="hasNoData">
      <span class="un-data-th">暂无数据哦～</span>
    </div>
  </div>
</template>

<script>
  import api from '../api/api'
  import echarts from 'echarts/lib/echarts'
  // 引入饼状图
  import 'echarts/lib/chart/pie';
  import 'echarts/lib/chart/line';
  import 'echarts/lib/component/title';
  import 'echarts/lib/component/legend';
  import 'echarts/lib/component/toolbox';
  import 'echarts/lib/component/markPoint';
  import 'echarts/lib/component/tooltip';

  export default {
    name: "source-echarts",
    props: ['keywordId', 'timeRange'],
    data() {
      return {
        loading: true,
        fromDateString: '',
        toDateString: '',
        sourceName: [],
        sourceNum: [],
        hasData: true,
        hasNoData: false
      }
    },
    mounted() {
      this.hotSource = echarts.init(document.getElementById('hotSource'));
      this.getData();
      this.resize();
    },
    methods: {
      resize() {
        // echarts自适应页面
        const self = this;
        setTimeout(() => {
          window.onresize = function () {
            self.hotSource.resize()
          }
        }, 20)
      },
      getData() {
        api.HotSource({keywordId: this.keywordId, fromDateString: this.fromDateString, toDateString: this.toDateString})
          .then(res => {
            this.loading = false;
            if(res.list.length == 0){
              this.hasData = false;
              this.hasNoData = true;
              return false
            }
            this.sourceName = [];
            this.sourceNum = [];
            for(let i=0;i < res.list.length; i++){
              this.sourceName.push(res.list[i].sourceFrom);
              this.sourceNum.push({
                value: res.list[i].count,
                name: res.list[i].sourceFrom
              })
            }
            this.initData()
          }).catch(e => {
          console.log(e);
        });
      },
      initData() {
        const option = {
          toolbox: {
            show: true,
            itemSize: 20,
            right: 20,
            feature: {
              dataZoom: {show: false},
              dataView: {show: false},
              magicType: {show: false},
              restore: {show: false},
              saveAsImage: {}
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"

          },
          legend: {
            orient: 'vertical',
            right: 20,
            top: 'middle',
            itemWidth: 14,
            itemHeight: 14,
            align: 'left',
            data: this.sourceName,
            textStyle: {
              color: '#333',
              fontSize: 14
            }
          },
          series: [

            {
              name: '访问来源',
              type: 'pie',
              radius: '55%',
              center: ['40%', '50%'],
              color: ['#00ffb4', '#22d8ef', '#23a9fa', '#2b6de3', '#2338fa', '#4622ef', ' #5f07d8'],
              label: {
                normal: {
                  formatter: '{b}\n{d}%'
                }
              },
              data: this.sourceNum
            }
          ]
        };
        this.hotSource.setOption(option);
      }
    },
    watch: {
      keywordId() {
        this.hotSource.clear();
        this.hasData = true;
        this.hasNoData = false;
        this.loading = true;
        this.getData()
      },
      timeRange() {
        if(this.timeRange == null){
          this.fromDateString = '';
          this.toDateString = ''
        }else{
          this.fromDateString = this.timeRange[0];
          this.toDateString = this.timeRange[1];
        }
        this.hotSource.clear();
        this.hasData = true;
        this.hasNoData = false;
        this.loading = true;
        this.getData()
      }
    }
  }
</script>

<style scoped lang="less">

</style>
